<template>
  <div class="root">
    <div class="left-content">
      <transition name="leftv">
        <img
          alt="VbenAdmin"
          src="/src/assets/images/login-box-bg.9027741f.svg"
          class="c-img"
          v-show="ifShow"
        />
      </transition>
    </div>
    <transition name="scale">
      <div class="loginForm" v-show="ifShow">
        <transition name="scale">
          <p style="text-align: center; font-size: 20px" v-show="ifShow">
            cc admin
          </p>
        </transition>
        <a-divider style="margin-bottom: 10%" />
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="name" v-bind="validateInfos.username">
            <a-input v-model:value="modelRef.username" placeholder="input name">
              <template #suffix>
                <user-outlined type="user" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item label="password" v-bind="validateInfos.password">
            <a-input-password
              v-model:value="modelRef.password"
              placeholder="input password"
              @pressEnter="onSubmit"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
            <transition name="scale">
              <div v-show="ifShow">
                <a-button
                  type="primary"
                  @click.prevent="onSubmit"
                  :loading="loading"
                  >Submit</a-button
                >
                <a-button style="margin-left: 10px" @click="resetFields"
                  >Reset</a-button
                >
              </div>
            </transition>
          </a-form-item>
        </a-form>
      </div>
    </transition>
    <div class="loading" v-if="!ifShow">
      <img alt="VbenAdmin" src="/src/assets/images/logo.svg" class="logo-img" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, toRaw, ref } from "vue";
import { Form } from "ant-design-vue";
import { modelRef, rulesRef } from "./index.data";
import { Api } from "/@/api/index";
import { UserOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import { mainStore } from "/@/store/index";
import { notification } from "ant-design-vue";
import { storage } from "/@/middleware";
import eventBus from "/@/eventBus";
export default defineComponent({
  components: { UserOutlined },
  setup() {
    const useForm = Form.useForm;
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const ifShow = ref(false);
    setTimeout(() => {
      ifShow.value = true;
    }, 300);
    const loading = ref(false);
    const store = mainStore();
    const openNotificationWithIcon = (type: string, user: string) => {
      notification[type]({
        duration: 2,
        message: "login success",
        description: `Welcome back, ${user}`,
      });
    };
    const onSubmit = () => {
      validate()
        .then(() => {
          loading.value = true;
          Api.user
            .login(toRaw(modelRef))
            ?.then((res: any) => {
              message.loading("菜单加载中...", 0.5);
              store.addMenu();
              eventBus.emit("loginSuccess");
              openNotificationWithIcon("success", res.data.username);
              storage?.set("token", res.data.token);
              storage?.set("username", res.data.username);
              resetFields();
            })
            .catch(() => {
              loading.value = false;
            });
        })
        .catch((err) => {
          console.log("error", err);
        });
    };
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      loading,
      ifShow,
    };
  },
});
</script>
<style scoped lang="less">
.root {
  position: relative;
  width: 100%;
  height: 100%;
  //  background: url(/@/assets/images/login1.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  .left-content::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -48%;
    background: url(/@/assets/images/login-bg.b9f5c736.svg);
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: "";
  }
  .c-img {
    position: absolute;
    width: 450px;
    height: 300px;
    left: 15%;
    top: 30%;
  }
}
.loginForm {
  width: 460px;
  height: 300px;
  position: absolute;
  right: 15%;
  padding-top: 20px;
  background-color: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 5px;
  top: 30%;
}
.loading {
  width: 100%;
  height: 100%;
  z-index: 999;
  position: relative;
  background-color: #fff;
}
.logo-img {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 100px;
  height: 100px;
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
  -webkit-animation: rotate 1s linear infinite;
  -moz-animation: rotate 1s linear infinite;
  -o-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s ease;
}
.scale-enter-from {
  opacity: 0;
  transform: translateX(150px);
}
.leftv-enter-active,
.leftv-leave-active {
  transition: all 0.5s ease;
}
.leftv-enter-from {
  opacity: 0;
  transform: translateX(-150px);
}
</style>
../../eventBus
